<template>
	<div class="citchild">
		<!-- 我是社区界面的子路由 -->
		<div class="works" v-for="list in mylist">
			<div class="work">
				<span class="name" @click="audel(list)">{{list.username}}</span>
				<span class="content" @click="det(list)">{{list.u_font}}</span>
				<!-- 图片区域 -->
				<img src="@/assets/images/3.jpg" alt="图片">
				<!-- 评论点赞区域 -->
				<div class="com">
					<van-icon name="eye-o" size="20" class="icon-detail"/>&nbsp;{{list.eye_count}}
					<van-icon name="chat-o" size="20" @click="show = true;sel(list)" class="chat"/>&nbsp;{{list.sum_com}}
					<van-icon name="good-job-o" size="20" class="icon-detail" @click="add(list)"/>&nbsp;{{list.sum_like}}
					<van-action-sheet v-model="show" :title="'共有'+ccc+'条评论'" class="vans" @click-overlay="clo()">
						<div class="cont" v-for="cc_list in c_list">
						  <span class="name1">{{cc_list.c_username}}</span>
						  <span class="content1">{{cc_list.c_font}}</span>
						  <hr>
						</div>
					  <div class="but">主子，我也是有底线的</div>
					  <div class="ip">
						  <input type="text" placeholder="写评论" v-model="c_font"><span class="aa" @click="subb(list)">发送</span>
					  </div>
					</van-action-sheet>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {Toast} from 'vant';
	import axios from 'axios';
	var querystring = require('querystring');
	// var mapState=Vuex.mapState;
	export default{
		name:'citchild',
		data(){
			return{
				ccc:'0',
				mylist:[],
				show:false,
				mine:'',
				username:'',
				w_username:'',
				w_font:'',
				c_font:'',
				c_list:[]
				
			}
		},
		created(){
			this.aa()
		},
		methods:{
			det(list){
				//跳到详情页并且浏览量+1
				console.log(list.username)
				this.$router.push({path:'Detail',query:{list:list}});
				var param={
					username:list.username,
					content:list.u_font
				};
				console.log(param.username+param.content)
				param = querystring.stringify(param);
				axios.post(this.$api+'/mywork/addeye',param).then((response)=>{
					console.log("浏览量+1")
					console.log(list.username+list.u_font)
				}).catch((error)=>{
					console.log(error)
				})
			},
			aa(){
				// console.log("执行查询作品成功")
				axios.post(this.$api+'/mywork/selall').then((response)=>{
					console.log(response.data)
					this.mylist=response.data.reverse()
					console.log(this.mylist.length)
					console.log(this.mylist[0].eye_count)
				}).catch((error)=>{
					console.log(error);
				})
			},
			add(list){
				console.log("触发点赞方法")
				// console.log(list.username+list.u_font)
				this.mine=JSON.parse(localStorage.getItem('data-mine'));		//获取登陆人的信息
				var param={
					'w_username':list.username,
					'w_font':list.u_font,
					'c_username':this.mine.detail.username,
				};
				param = querystring.stringify(param);
				axios.post(this.$api+'/like/sellike',param).then((response)=>{
					console.log(response.data)
					if(response.data.success=true){			//点赞成功
						Toast(response.data.msg)
						this.aa()
					}else{									//点赞失败
						Toast(response.data.msg)
					}
				}).catch((error)=>{
					console.log(error);
				})
			},
			audel(list){
				console.log(list.username)
				this.$router.push({path:'Author',query:{author:list.username}})			//跳转作者详情页
			},
			subb(list){				
				this.mine=JSON.parse(localStorage.getItem('data-mine'));//提交评论
				let yy = new Date().getFullYear();		//获取当前年份
				let mm = new Date().getMonth()+1;		//获取当前月份
				let dd = new Date().getDate();			//获取当前日
				let wk = new Date().getDay();  			//会根据当前是星期几，返回对应的数字：0(周日)-6(周六)
				let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				let yymm=yy+'年'+mm+'月';
				var param={
					'w_username':this.w_username,
					'w_font':this.w_font,
					'c_username':this.mine.detail.username,
					'c_font':this.c_font,
					'c_day':dd,
					'c_yymm':yymm
				};
				param = querystring.stringify(param);
				axios.post(this.$api+'/comment/subcm',param).then((response)=>{
					// console.log('发送后返回的数据'+response.data)
					this.c_font=''
					if(response.data.success==true){
						Toast('评论成功');
						// this.sel(list).refresh();
					}else{
						Toast('评论失败')
					}
				}).catch((error)=>{
					console.log(error);
				}),
				Toast('发送按钮');
			},
			sel(list){								//查询对应评论的方法
				// alert(list.sub_day)
				this.w_username=list.username
				this.w_font=list.u_font
				// console.log("同时触发事件执行成功")
				var param={
					'w_username':this.w_username,
					'w_font':this.w_font
				};
				param = querystring.stringify(param);
				axios.post(this.$api+'/comment/selc',param).then((response)=>{
					// console.log(response.data);
					if(response.data.success==false){
						Toast("暂无评论");
					}else{
						this.c_list=response.data.detail.reverse()
						this.ccc=this.c_list.length
						Toast('存在评论，请查看')
					}
				}).catch((error)=>{
					console.log(error)
				})
			},
			clo(){			//为了防止c_list的错乱
				console.log('成功触发方法')
				this.c_list=''
				this.ccc='0'
			}
		}
	}
</script>

<style scoped>
	.citchild{
		margin-top: 55px;
	}
	.com{
		margin-top: 10px;
	}
	.chat{
		margin-top: -5px;
		vertical-align: middle;
		margin-left: 170px;
	}
	.works{
		background-color: white;
		margin: 10px;
		border-radius: 5px;
		border:1px solid #FFD01E;
		
		padding: 5px;
	}
	.icon-detail{
		margin-top: -5px;
		vertical-align: middle;
	}
	span{
		display: block;
		margin: 10px;
	}
	.name{
		font-weight: bold;
		margin-right: 220px;
	}
	.content{
		margin-bottom: 20px;
	}
	img{
		width: 280px;
		height: 150px;
	}
	.cont {
	   /* padding: 16px 16px 160px;
		padding-left: 10px; */
	}
	.but{
		  margin-bottom: 30px;
		  color: gray;
	}
	.vans{
		font-size:15px;
		height: 300px;
		margin-bottom: 40px;
	}
	.name1,.content1{
		font-size: 10px;
	}
	.van-overlay{
		background-color: rgba(0,0,0,0);
	}
	.ip{
		background-color: white;
		position: fixed;
		bottom: 0px;
		left: 10px;
	}
	input{
		width: 240px;
		height: 30px;
		margin-bottom: 20px;
		margin-left: 20px;
		color: grey;
		border:0px;
		background-color: #FAFAFA;
	}
	#num{
		display: inline-block;
		/* background-color:#0570DB ; */
	}
	.aa{
		display: inline;
		margin-left: 15px;
		/* background-color: #0570DB; */
	}
	.name1{
		margin-right: 200px;
	}
	hr{
		border:0.5px solid #FAFAFA;
		width: 280px;
	}
</style>
